<template>
  <div class="app">
    <header class="header">
      <h1>🚀 Fullstack tRPC 应用</h1>
      <p>类型安全的全栈开发体验</p>
    </header>

    <div class="container">
      <!-- 用户列表 -->
      <section class="section">
        <h2>用户列表</h2>
        <div class="actions">
          <button @click="loadUsers" :disabled="loading">
            {{ loading ? '加载中...' : '刷新列表' }}
          </button>
          <button @click="showCreateForm = !showCreateForm">
            {{ showCreateForm ? '取消' : '创建用户' }}
          </button>
        </div>

        <div v-if="error" class="error">{{ error }}</div>

        <div v-if="usersData" class="users-grid">
          <div v-for="user in usersData.users" :key="user.uid" class="user-card">
            <h3>{{ user.nickname }}</h3>
            <p>👤 {{ user.sex }}</p>
            <p>🎂 {{ user.age }} 岁</p>
            <p class="uid">ID: {{ user.uid.slice(0, 8) }}...</p>
            <div class="user-actions">
              <button @click="deleteUser(user.uid)" class="btn-danger">删除</button>
            </div>
          </div>
        </div>
      </section>

      <!-- 创建用户表单 -->
      <section v-if="showCreateForm" class="section form-section">
        <h2>创建新用户</h2>
        <form @submit.prevent="handleCreateUser" class="form">
          <div class="form-group">
            <label>昵称</label>
            <input v-model="newUser.nickname" type="text" required />
          </div>
          <div class="form-group">
            <label>性别</label>
            <select v-model="newUser.sex" required>
              <option value="">请选择</option>
              <option value="男">男</option>
              <option value="女">女</option>
              <option value="其他">其他</option>
            </select>
          </div>
          <div class="form-group">
            <label>年龄</label>
            <input v-model.number="newUser.age" type="number" min="0" max="150" required />
          </div>
          <button type="submit" :disabled="creating">
            {{ creating ? '创建中...' : '创建用户' }}
          </button>
        </form>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { trpc } from './trpc'
import type { User } from '@shared/types'

const loading = ref(false)
const creating = ref(false)
const error = ref<string | null>(null)
const usersData = ref<{ users: User[]; total: number } | null>(null)
const showCreateForm = ref(false)

const newUser = ref({
  nickname: '',
  age: 0,
  sex: ''
})

const loadUsers = async () => {
  loading.value = true
  error.value = null
  try {
    const result = await trpc.getUsers.query({ limit: 20, offset: 0 })
    usersData.value = result
  } catch (err: any) {
    error.value = err.message || '加载失败'
    console.error(err)
  } finally {
    loading.value = false
  }
}

const handleCreateUser = async () => {
  creating.value = true
  error.value = null
  try {
    await trpc.createUser.mutate(newUser.value)
    newUser.value = { nickname: '', age: 0, sex: '' }
    showCreateForm.value = false
    await loadUsers()
  } catch (err: any) {
    error.value = err.message || '创建失败'
    console.error(err)
  } finally {
    creating.value = false
  }
}

const deleteUser = async (uid: string) => {
  if (!confirm('确定要删除这个用户吗？')) return

  error.value = null
  try {
    await trpc.deleteUser.mutate({ uid })
    await loadUsers()
  } catch (err: any) {
    error.value = err.message || '删除失败'
    console.error(err)
  }
}

onMounted(() => {
  loadUsers()
})
</script>

<style scoped>
.app {
  color: white;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.header p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.section {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.section h2 {
  margin-bottom: 20px;
  font-size: 1.8rem;
}

.actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s;
}

button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
}

.btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.5);
}

.error {
  background: rgba(239, 68, 68, 0.3);
  border: 1px solid rgba(239, 68, 68, 0.5);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.user-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 20px;
  transition: transform 0.3s;
}

.user-card:hover {
  transform: translateY(-5px);
}

.user-card h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.user-card p {
  margin: 5px 0;
  opacity: 0.9;
}

.user-actions {
  margin-top: 15px;
}

.form-section {
  max-width: 500px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
}

.form-group input {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1rem;
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.form-group select {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1rem;
}

.form-group select option {
  background: rgba(102, 126, 234, 0.9);
  color: white;
}

.uid {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 10px;
}
</style>
